<!-- 左侧控件区域 -->
<template>
  <div class="left-aside">
    <MusicSelectList
      :mapping="{
        C: 'C大调',
        D: 'D大调',
        E: 'E大调',
        F: 'F大调',
        G: 'G大调',
        A: 'A大调',
        B: 'B大调',
      }"
      :width="120"
      :height="40"
      :fontSize="18"
      backgroundColor="#ccc"
      fontColor="blue"

      class="select-box"
      v-model="major"
    />
  </div>
</template>


<script setup lang="ts">
  import MusicSelectList from '@/components/MusicSelectList.vue';
  import { inject } from 'vue';
  import { MAJOR_KEY } from '@/types/types';

  const major = inject(MAJOR_KEY)!;       // 使用Symbol作为key，类型会自动推断
</script>

<style lang="scss" scoped>
  .left-aside {
    width: 300px;
    background-color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .select-box {
    margin-top: 50px;
  }
</style>